<template>
  <view class="bi-container pageBg">
    <view class="bi-header">
      <text>BI分析</text>
    </view>
    
    <view class="bi-content">
      <view class="form-item">
        <text class="label">图表名称：</text>
        <input type="text" v-model="formData.name" placeholder="请输入图表名称" class="input" />
      </view>
      
      <view class="form-item">
        <text class="label">分析目标：</text>
        <input type="text" v-model="formData.goal" placeholder="请输入分析目标" class="input" />
      </view>
      
      <view class="form-item">
        <text class="label">图表类型：</text>
        <picker @change="bindPickerChange" :value="chartTypeIndex" :range="chartTypes" class="picker">
          <view class="picker-text">{{chartTypes[chartTypeIndex]}}</view>
        </picker>
      </view>
      
      <view class="form-item file-picker-container">
        <text class="label">上传文件：</text>
        <uni-file-picker 
          v-model="fileValue" 
          file-mediatype="all" 
          :file-extname="fileExtname"
          limit="1"
          @select="onFileSelect" 
          @progress="onFileProgress" 
          @success="onFileSuccess" 
          @fail="onFileFail"
          :auto-upload="false"
        />
      </view>
      
      <view class="btn-group">
        <button @click="generateAnalysis" class="generate-btn" :disabled="loading">
          {{loading ? '分析中...' : '生成分析'}}
        </button>
        <!-- <button @click="testWithSampleData" class="test-btn">
          测试示例数据
        </button>
        <button @click="testWithNewFormatData" class="test-btn">
          测试新格式数据
        </button>
        <button @click="testWithColumnData" class="test-btn">
          测试柱状图数据
        </button> -->
        <!-- <button @click="testWithSimplePieData" class="test-btn">
          测试普通饼图数据
        </button> -->
      </view>
    </view>
    
    <view v-if="result" class="result-container">
      <view class="result-header">
        <text class="result-title">分析结果</text>
        <text class="result-info">学号：{{result.henauNumber}} | 姓名：{{result.userName}}</text>
        <text class="result-time">生成时间：{{formatDate(result.createTime)}}</text>
      </view>
      
      <view class="chart-container">
        <qiun-data-charts 
          :type="chartType"
          :opts="{legend:{show:true}}"
          :chartData="chartData" 
          v-if="chartData.series && chartData.series.length > 0"
        />
      </view>
      
      <view class="conclusion">
        <text class="conclusion-title">结论：</text>
        <text class="conclusion-content">{{conclusion}}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { bi } from '@/api/apis';
import { BASEURL } from '@/utils/request';

// 表单数据
const formData = reactive({
  name: '',
  goal: '',
  chartType: '饼状图'
});

// 图表类型选择
const chartTypes = ['饼状图'];
const chartTypeIndex = ref(0);

// 文件相关
const fileValue = ref([]);
const fileExtname = ref('xlsx,xls,csv');
const tempFilePath = ref('');
const fileName = ref('');

// 结果相关
const result = ref(null);
const chartHtml = ref('');
const conclusion = ref('');
const loading = ref(false);
const chartData = ref({
  categories: [],
  series: []
});
const chartType = ref('pie'); // 默认设置为饼图

// 添加测试函数，用于直接处理数据
const processTestData = (testData) => {
  if (testData && testData.code === 200 && testData.data) {
    result.value = testData.data;
    
    if (testData.data.content) {
      try {
        // 尝试直接解析content字段
        const contentStr = testData.data.content;
        console.log('原始内容:', contentStr);
        
        // 检查是否包含```json标记
        if (contentStr.includes('```json')) {
          // 提取JSON部分 - 在```json和```之间
          const jsonStartIndex = contentStr.indexOf('```json\n') + 8; // 8是'```json\n'的长度
          const jsonEndIndex = contentStr.indexOf('\n```', jsonStartIndex);
          
          if (jsonStartIndex > 7 && jsonEndIndex > jsonStartIndex) {
            const jsonPart = contentStr.substring(jsonStartIndex, jsonEndIndex);
            console.log('提取的JSON部分:', jsonPart);
            
            // 提取结论部分 - 在结论：之后
            const conclusionStartIndex = contentStr.indexOf('结论：\n');
            if (conclusionStartIndex > -1) {
              const conclusionPart = contentStr.substring(conclusionStartIndex + 4); // +4是'结论：\n'的长度
              console.log('提取的结论部分:', conclusionPart);
              
              try {
                // 解析JSON字符串为对象
                const chartDataObj = JSON.parse(jsonPart);
                console.log('解析后的图表数据:', chartDataObj);
                
                // 设置图表数据
                if (chartDataObj && chartDataObj.series && chartDataObj.series.length > 0) {
                  // 根据图表类型设置数据格式
                  if (chartDataObj.category && Array.isArray(chartDataObj.category)) {
                    // 柱状图/折线图数据格式（带有category字段）
                    chartData.value = {
                      categories: chartDataObj.category,
                      series: chartDataObj.series
                    };
                    console.log('设置带category的图表数据:', chartData.value);
                  } else if (chartType.value === 'pie') {
                    // 饼图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置饼图数据:', chartData.value);
                  } else if (chartType.value === 'column' || chartType.value === 'line') {
                    // 柱状图和折线图数据格式（不带category字段）
                    const categories = [];
                    const seriesData = [];
                    
                    // 从第一个系列中提取类别和数据
                    if (chartDataObj.series[0].data) {
                      chartDataObj.series[0].data.forEach(item => {
                        categories.push(item.name);
                        seriesData.push(item.value);
                      });
                      
                      chartData.value = {
                        categories: categories,
                        series: [{
                          name: '数值',
                          data: seriesData
                        }]
                      };
                      console.log('设置柱状图/折线图数据:', chartData.value);
                    }
                  } else if (chartType.value === 'scatter') {
                    // 散点图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置散点图数据:', chartData.value);
                  }
                }
                
                // 设置结论
                conclusion.value = conclusionPart;
                console.log('设置结论:', conclusion.value);
              } catch (e) {
                console.error('解析图表数据失败', e);
              }
            }
          }
        } else {
          // 分离JSON和结论部分 - 不带```json标记的情况
          const jsonEndIndex = contentStr.indexOf('\n结论：');
          if (jsonEndIndex > -1) {
            // 提取JSON部分
            const jsonPart = contentStr.substring(0, jsonEndIndex);
            // 提取结论部分
            const conclusionPart = contentStr.substring(jsonEndIndex + 4); // +4 是跳过 '\n结论：'
            
            try {
              // 解析JSON字符串为对象
              const chartDataObj = JSON.parse(jsonPart);
              console.log('解析后的图表数据:', chartDataObj);
              
              // 设置图表数据
              if (chartDataObj && chartDataObj.series && chartDataObj.series.length > 0) {
                // 根据图表类型设置数据格式
                if (chartDataObj.category && Array.isArray(chartDataObj.category)) {
                  // 柱状图/折线图数据格式（带有category字段）
                  chartData.value = {
                    categories: chartDataObj.category,
                    series: chartDataObj.series
                  };
                  console.log('设置带category的图表数据:', chartData.value);
                } else if (chartType.value === 'pie') {
                  // 饼图数据格式
                  chartData.value = {
                    series: chartDataObj.series
                  };
                  console.log('设置饼图数据:', chartData.value);
                } else if (chartType.value === 'column' || chartType.value === 'line') {
                  // 柱状图和折线图数据格式（不带category字段）
                  const categories = [];
                  const seriesData = [];
                  
                  // 从第一个系列中提取类别和数据
                  if (chartDataObj.series[0].data) {
                    chartDataObj.series[0].data.forEach(item => {
                      categories.push(item.name);
                      seriesData.push(item.value);
                    });
                    
                    chartData.value = {
                      categories: categories,
                      series: [{
                        name: '数值',
                        data: seriesData
                      }]
                    };
                    console.log('设置柱状图/折线图数据:', chartData.value);
                  }
                } else if (chartType.value === 'scatter') {
                  // 散点图数据格式
                  chartData.value = {
                    series: chartDataObj.series
                  };
                  console.log('设置散点图数据:', chartData.value);
                }
              }
              
              // 设置结论
              conclusion.value = conclusionPart;
              console.log('设置结论:', conclusion.value);
            } catch (e) {
              console.error('解析图表数据失败', e);
            }
          } else {
            // 尝试直接解析整个内容为JSON
            try {
              const contentObj = JSON.parse(contentStr);
              if (contentObj && contentObj.series && contentObj.series.length > 0) {
                // 设置图表数据
                if (contentObj.category && Array.isArray(contentObj.category)) {
                  // 柱状图/折线图数据格式
                  chartData.value = {
                    categories: contentObj.category,
                    series: contentObj.series
                  };
                  console.log('设置直接解析的柱状图/折线图数据:', chartData.value);
                } else {
                  // 饼图数据格式
                  chartData.value = {
                    series: contentObj.series
                  };
                  console.log('设置直接解析的饼图数据:', chartData.value);
                }
              }
            } catch (e) {
              console.error('直接解析内容失败', e);
            }
          }
        }
      } catch (e) {
        console.error('处理内容失败', e);
      }
    }
  }
};

// 选择图表类型
const bindPickerChange = (e) => {
  chartTypeIndex.value = e.detail.value;
  formData.chartType = chartTypes[chartTypeIndex.value];
  
  // 更新图表类型
  switch(formData.chartType) {
    case '饼状图':
      chartType.value = 'pie';
      break;
  }
};

// 文件选择事件
const onFileSelect = (e) => {
  console.log('文件选择', e);
  if (e.tempFiles && e.tempFiles.length > 0) {
    tempFilePath.value = e.tempFiles[0].path || e.tempFiles[0].url || e.tempFiles[0].file;
    fileName.value = e.tempFiles[0].name;
  }
};

// 文件上传进度事件
const onFileProgress = (e) => {
  console.log('上传进度', e);
};

// 文件上传成功事件
const onFileSuccess = (e) => {
  console.log('上传成功', e);
};

// 文件上传失败事件
const onFileFail = (e) => {
  console.log('上传失败', e);
  uni.showToast({
    title: '文件上传失败',
    icon: 'none'
  });
};

// 生成分析
const generateAnalysis = async () => {
  if (!formData.name || !formData.goal || !tempFilePath.value) {
    uni.showToast({
      title: '请填写完整信息并上传文件',
      icon: 'none'
    });
    return;
  }
  
  loading.value = true;
  
  try {
    // 获取token
    const token = uni.getStorageSync("token");
    
    // 构建请求参数
    const params = `?name=${encodeURIComponent(formData.name)}&goal=${encodeURIComponent(formData.goal)}&chartType=${encodeURIComponent(formData.chartType)}`;
    
    // 使用uni.uploadFile上传文件
    const uploadResult = await new Promise((resolve, reject) => {
      uni.uploadFile({
        url: `${BASEURL}/api/gen/chart${params}`,
        filePath: tempFilePath.value,
        name: 'file',
        header: {
          "authorization": token || '' // 添加token到请求头
        },
        success: (uploadRes) => {
          try {
            // 解析返回的JSON字符串
            const data = JSON.parse(uploadRes.data);
            resolve(data);
          } catch (e) {
            reject(new Error('解析响应数据失败'));
          }
        },
        fail: (err) => {
          reject(err);
        }
      });
    });
    
    if (uploadResult && uploadResult.code === 200) {
      result.value = uploadResult.data;
      console.log('API返回数据:', uploadResult.data);
      
      // 直接从返回的数据中提取内容
      if (uploadResult.data.content) {
        const contentStr = uploadResult.data.content;
        console.log('原始内容:', contentStr);
        
        // 检查是否包含```json标记
        if (contentStr.includes('```json')) {
          // 提取JSON部分 - 在```json和```之间
          const jsonStartIndex = contentStr.indexOf('```json\n') + 8; // 8是'```json\n'的长度
          const jsonEndIndex = contentStr.indexOf('\n```', jsonStartIndex);
          
          if (jsonStartIndex > 7 && jsonEndIndex > jsonStartIndex) {
            const jsonPart = contentStr.substring(jsonStartIndex, jsonEndIndex);
            console.log('提取的JSON部分:', jsonPart);
            
            // 提取结论部分 - 在结论：之后
            const conclusionStartIndex = contentStr.indexOf('结论：\n');
            if (conclusionStartIndex > -1) {
              const conclusionPart = contentStr.substring(conclusionStartIndex + 4); // +4是'结论：\n'的长度
              console.log('提取的结论部分:', conclusionPart);
              
              try {
                // 解析JSON字符串为对象
                const chartDataObj = JSON.parse(jsonPart);
                console.log('解析后的图表数据:', chartDataObj);
                
                // 设置图表数据
                if (chartDataObj && chartDataObj.series && chartDataObj.series.length > 0) {
                  // 根据图表类型设置数据格式
                  if (chartDataObj.category && Array.isArray(chartDataObj.category)) {
                    // 柱状图/折线图数据格式（带有category字段）
                    chartData.value = {
                      categories: chartDataObj.category,
                      series: chartDataObj.series
                    };
                    console.log('设置带category的图表数据:', chartData.value);
                  } else if (chartType.value === 'pie') {
                    // 饼图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置饼图数据:', chartData.value);
                  } else if (chartType.value === 'column' || chartType.value === 'line') {
                    // 柱状图和折线图数据格式（不带category字段）
                    const categories = [];
                    const seriesData = [];
                    
                    // 从第一个系列中提取类别和数据
                    if (chartDataObj.series[0].data) {
                      chartDataObj.series[0].data.forEach(item => {
                        categories.push(item.name);
                        seriesData.push(item.value);
                      });
                      
                      chartData.value = {
                        categories: categories,
                        series: [{
                          name: '数值',
                          data: seriesData
                        }]
                      };
                      console.log('设置柱状图/折线图数据:', chartData.value);
                    }
                  } else if (chartType.value === 'scatter') {
                    // 散点图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置散点图数据:', chartData.value);
                  }
                }
                
                // 设置结论
                conclusion.value = conclusionPart;
                console.log('设置结论:', conclusion.value);
              } catch (e) {
                console.error('解析图表数据失败', e);
              }
            }
          }
        } else {
          // 提取JSON和结论 - 原来的方式
          const contentParts = uploadResult.data.content.split('```json\n');
          if (contentParts.length > 1) {
            const jsonAndConclusion = contentParts[1].split('```\n结论：\n');
            if (jsonAndConclusion.length > 1) {
              const jsonStr = jsonAndConclusion[0];
              try {
                // 解析JSON字符串为对象
                const chartDataObj = JSON.parse(jsonStr);
                console.log('解析后的图表数据:', chartDataObj);
                
                // 设置图表数据
                if (chartDataObj && chartDataObj.series && chartDataObj.series.length > 0) {
                  // 根据图表类型设置数据格式
                  if (chartDataObj.category && Array.isArray(chartDataObj.category)) {
                    // 柱状图/折线图数据格式（带有category字段）
                    chartData.value = {
                      categories: chartDataObj.category,
                      series: chartDataObj.series
                    };
                    console.log('设置带category的图表数据:', chartData.value);
                  } else if (chartType.value === 'pie') {
                    // 饼图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置饼图数据:', chartData.value);
                  } else if (chartType.value === 'column' || chartType.value === 'line') {
                    // 柱状图和折线图数据格式（不带category字段）
                    const categories = [];
                    const seriesData = [];
                    
                    // 从第一个系列中提取类别和数据
                    if (chartDataObj.series[0].data) {
                      chartDataObj.series[0].data.forEach(item => {
                        categories.push(item.name);
                        seriesData.push(item.value);
                      });
                      
                      chartData.value = {
                        categories: categories,
                        series: [{
                          name: '数值',
                          data: seriesData
                        }]
                      };
                      console.log('设置柱状图/折线图数据:', chartData.value);
                    }
                  } else if (chartType.value === 'scatter') {
                    // 散点图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置散点图数据:', chartData.value);
                  }
                }
              } catch (e) {
                console.error('解析图表数据失败', e);
              }
              conclusion.value = jsonAndConclusion[1];
              console.log('设置结论:', conclusion.value);
            }
          } else {
            // 尝试处理不带```json标记的格式
            const jsonEndIndex = contentStr.indexOf('\n结论：');
            if (jsonEndIndex > -1) {
              // 提取JSON部分
              const jsonPart = contentStr.substring(0, jsonEndIndex);
              // 提取结论部分
              const conclusionPart = contentStr.substring(jsonEndIndex + 4); // +4 是跳过 '\n结论：'
              
              try {
                // 解析JSON字符串为对象
                const chartDataObj = JSON.parse(jsonPart);
                console.log('解析后的图表数据:', chartDataObj);
                
                // 设置图表数据
                if (chartDataObj && chartDataObj.series && chartDataObj.series.length > 0) {
                  // 根据图表类型设置数据格式
                  if (chartDataObj.category && Array.isArray(chartDataObj.category)) {
                    // 柱状图/折线图数据格式（带有category字段）
                    chartData.value = {
                      categories: chartDataObj.category,
                      series: chartDataObj.series
                    };
                    console.log('设置带category的图表数据:', chartData.value);
                  } else if (chartType.value === 'pie') {
                    // 饼图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置饼图数据:', chartData.value);
                  } else if (chartType.value === 'column' || chartType.value === 'line') {
                    // 柱状图和折线图数据格式（不带category字段）
                    const categories = [];
                    const seriesData = [];
                    
                    // 从第一个系列中提取类别和数据
                    if (chartDataObj.series[0].data) {
                      chartDataObj.series[0].data.forEach(item => {
                        categories.push(item.name);
                        seriesData.push(item.value);
                      });
                      
                      chartData.value = {
                        categories: categories,
                        series: [{
                          name: '数值',
                          data: seriesData
                        }]
                      };
                      console.log('设置柱状图/折线图数据:', chartData.value);
                    }
                  } else if (chartType.value === 'scatter') {
                    // 散点图数据格式
                    chartData.value = {
                      series: chartDataObj.series
                    };
                    console.log('设置散点图数据:', chartData.value);
                  }
                }
                
                // 设置结论
                conclusion.value = conclusionPart;
                console.log('设置结论:', conclusion.value);
              } catch (e) {
                console.error('解析图表数据失败', e);
              }
            } else {
              // 尝试直接解析整个内容为JSON
              try {
                const contentObj = JSON.parse(contentStr);
                if (contentObj && contentObj.series && contentObj.series.length > 0) {
                  // 设置图表数据
                  if (contentObj.category && Array.isArray(contentObj.category)) {
                    // 柱状图/折线图数据格式
                    chartData.value = {
                      categories: contentObj.category,
                      series: contentObj.series
                    };
                    console.log('设置直接解析的柱状图/折线图数据:', chartData.value);
                  } else {
                    // 饼图数据格式
                    chartData.value = {
                      series: contentObj.series
                    };
                    console.log('设置直接解析的饼图数据:', chartData.value);
                  }
                }
              } catch (e) {
                console.error('直接解析内容失败', e);
              }
            }
          }
        }
      }
    } else {
      // 处理token过期的情况
      if (uploadResult && uploadResult.code === 401) {
        uni.showToast({
          title: '登录已过期，请重新登录',
          icon: 'none'
        });
        // 可以在这里添加跳转到登录页面的逻辑
        // uni.navigateTo({ url: '/pages/login/index' });
      } else {
        uni.showToast({
          title: uploadResult?.message || '分析失败',
          icon: 'none'
        });
      }
    }
  } catch (error) {
    console.error(error);
    uni.showToast({
      title: '分析失败，请重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 添加测试示例数据的函数
const testWithSampleData = () => {
  const testData = {
    "code": 200,
    "data": {
      "henauNumber": "2321241341",
      "userName": "焦天博",
      "content": "{\n  \"series\": [\n    {\n      \"type\": \"pie\",\n      \"data\": [\n        {\"name\": \"英语\", \"value\": 20},\n        {\"name\": \"数学\", \"value\": 40},\n        {\"name\": \"语文\", \"value\": 90}\n      ]\n    }\n  ]\n}\n结论：\n在陈韶的成绩中，语文成绩最高，占比最大，为90分；其次是数学，成绩为40分；英语成绩最低，为20分。这表明陈韶在语文学科上表现最为突出，而在英语学科上需要加强。",
      "createTime": "2025-03-01T08:28:25.197+00:00"
    },
    "message": "ok"
  };
  
  console.log('测试数据:', testData);
  
  // 处理测试数据
  processTestData(testData);
};

// 添加测试新格式数据的函数
const testWithNewFormatData = () => {
  const testData = {
    "code": 200,
    "data": {
      "henauNumber": "2321241341",
      "userName": "焦天博",
      "content": "```json\n{\n  \"series\": [\n    {\n      \"type\": \"pie\",\n      \"data\": [\n        {\"name\": \"英语\", \"value\": 20},\n        {\"name\": \"数学\", \"value\": 40},\n        {\"name\": \"语文\", \"value\": 90}\n      ]\n    }\n  ]\n}\n```\n\n结论：\n根据提供的数据，陈韶在三门科目中的成绩分布如下：英语成绩为20分，占总分的最小比例；数学成绩为40分，位于中等水平；而语文成绩最高，为90分，占据了最大的比例。通过饼状图可以直观地看出，陈韶在语文方面的表现最为突出，而在英语方面需要加强。",
      "createTime": "2025-03-01T08:35:25.873+00:00"
    },
    "message": "ok"
  };
  
  console.log('测试新格式数据:', testData);
  
  // 处理测试数据
  processTestData(testData);
};

// 添加测试柱状图数据的函数
const testWithColumnData = () => {
  const testData = {
    "code": 200,
    "data": {
      "henauNumber": "2321241341",
      "userName": "焦天博",
      "content": "```json\n{\n  \"category\": [\"英语\", \"数学\", \"语文\"],\n  \"series\": [\n    {\n      \"name\": \"陈韶成绩\",\n      \"data\": [20, 40, 90]\n    }\n  ]\n}\n```\n结论：\n从提供的数据中，我们可以观察到陈韶在三个科目的成绩分布。具体来说，陈韶的英语成绩为20分，数学成绩为40分，而语文成绩则显著更高，达到了90分。这表明陈韶在语文学科上的表现远优于其他两门科目，尤其是与英语相比，差距非常明显。这种分数分布可能暗示陈韶在语文学习上有较强的兴趣或能力，而在英语和数学方面可能需要更多的努力或辅导来提高成绩。",
      "createTime": "2025-03-01T08:35:25.873+00:00"
    },
    "message": "ok"
  };
  
  // 设置为柱状图
  formData.chartType = '柱状图';
  chartTypeIndex.value = 1; // 柱状图索引
  
  console.log('测试柱状图数据:', testData);
  
  // 处理测试数据
  processTestData(testData);
};

// 添加测试普通饼图数据的函数
const testWithSimplePieData = () => {
  const testData = {
    "code": 200,
    "data": {
      "henauNumber": "2321241341",
      "userName": "焦天博",
      "content": "{\n  \"series\": [\n    {\n      \"type\": \"pie\",\n      \"data\": [\n        {\"name\": \"英语\", \"value\": 20},\n        {\"name\": \"数学\", \"value\": 40},\n        {\"name\": \"语文\", \"value\": 90},\n        {\"name\": \"java\", \"value\": 50}\n      ]\n    }\n  ]\n}\n结论：\n在所提供的数据中，语文的分数最高，为90分，占总分数的45%。其次是数学，得分为40分，占总分数的20%。Java和英语的得分分别为50分和20分，分别占总分数的25%和10%。从饼状图中可以直观地看出，语文是这门课程中表现最好的科目，而英语则是表现最差的科目。",
      "createTime": "2025-03-01T08:45:49.601+00:00"
    },
    "message": "ok"
  };
  
  // 设置为饼图
  formData.chartType = '饼状图';
  chartTypeIndex.value = 0; // 饼图索引
  
  console.log('测试普通饼图数据:', testData);
  
  // 处理测试数据
  processTestData(testData);
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
};

const padZero = (num) => {
  return num < 10 ? `0${num}` : num;
};
</script>

<style>
.bi-container {
  padding: 20rpx;
  min-height: 100vh;
}

.bi-header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  padding: 20rpx 0;
}

.bi-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.file-picker-container {
  align-items: flex-start;
}

.label {
  width: 180rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  height: 70rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.picker {
  flex: 1;
  height: 70rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 28rpx;
}

.btn-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.generate-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-top: 30rpx;
}

.test-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #666;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-top: 20rpx;
}

.result-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-top: 30rpx;
}

.result-header {
  margin-bottom: 20rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.result-info {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.result-time {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.chart-container {
  width: 100%;
  height: 500rpx;
  margin: 30rpx 0;
  border: 1px solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
}

.conclusion {
  margin-top: 30rpx;
}

.conclusion-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.conclusion-content {
  font-size: 26rpx;
  line-height: 1.6;
  color: #333;
}
</style>